<template>
  <div class="retailTerminalRankings">
    <div class="retailTerminalRankings-top">
      <van-row>
        <van-col span="12" >
          <van-button style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="timePopup=true">{{headerTime}}<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col span="12">
          <van-button style="width:100%;background: #F7F7F7;border-radius: 0!important;"  @click="sortShows=true">排序<i class="iconfont icon-xia"></i></van-button>
        </van-col>
      </van-row>

    </div>

    <div class="retailTerminalRankings-content" >
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getData"
      >
        <div v-if="typeof retailTerminal=='string'" style="color:#ddd;padding:20px 0;background: #fff!important;">{{retailTerminal}}</div>
        <van-row v-else style="padding:15px 0;margin:5px 0;background: #fff!important;border-radius: 3px;" v-for="(item,idx) in retailTerminal" :key="idx">

          <van-col  span="8" class="paimings" style="    line-height: 62px;">
            <img v-if="idx==0" src="../../images/one.png" class="pmimg" alt="">
            <img v-else-if="idx==1" src="../../images/tow.png" class="pmimg" alt="">
            <img v-else-if="idx==2" src="../../images/threen.png" class="pmimg" alt="">
            <span v-else>{{idx+1}}</span>
          </van-col>
          <van-col span="16">
            <van-row>
              <van-col span="24" style="text-align: left;padding:5px 0;">
                <!--<i class="iconfont icon-dianpu-copy"></i>:{{stores.filter(i=>i.id==item.store_id)[0].name}}-->
                <i class="iconfont icon-dianpu-copy"></i>:{{item.customer_store_name}}
              </van-col>
              <van-col span="12" style="text-align: left;padding:5px 0">
                <i class="iconfont icon-ai-user"></i>:{{item.customer_name}}
              </van-col>
              <van-col span="12" style="padding:5px 0">
                <p v-if="sortResultsData==1">
                  金额:<span  :style="{color:color}">￥{{item.shishou}}</span>
                </p>
                <p v-else>
                  数量:<span  :style="{color:color}">{{item.xsnum}}</span>
                </p>

              </van-col>
            </van-row>
          </van-col>

        </van-row>
        <van-row :style="{display:noData}" class="noDatas">
          <van-col span="24">数据已加载完</van-col>
        </van-row>
      </van-list>



    </div>

    <!--时间弹出层-->
    <van-popup v-model="timePopup" @click-overlay="timeRadio=timeRadioPrev" class="timeMask">
      <div style="overflow: scroll;height:80%;padding-top:10px;">
        <van-radio-group v-model="timeRadio">
          <van-cell-group>
            <van-cell style="text-align: left;" v-for="(val,keys) in timeSelect" :title="val.name" :key="keys" clickable @click="timeCheckFn(val.type,val.name)">
              <van-radio :name="val.type" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button  class="maskBtn"  @click="timeRadio=timeRadioPrev,timePopup=false,headerTime=headerTimeprev">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button  type="primary" class="maskBtn" @click="getTsList">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>
    <!--排序弹层-->
    <van-popup v-model="sortShows"  @click-overlay="sortResults=sortResultsPrev" :overlay="true" class="paixuMask" >

      <div style="overflow: scroll;height:80%;padding-top:10px;">
        <van-radio-group v-model="sortResults">
          <van-cell-group>
            <van-cell style="text-align: left;" title="按金额" clickable @click="sortResults = '1'">
              <van-radio name="1" />
            </van-cell>
            <van-cell style="text-align: left;" title="按数量" clickable @click="sortResults = '2'">
              <van-radio name="2" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button class="maskBtn"  @click="sortResults=sortResultsPrev,sortShows=false">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button  type="primary" class="maskBtn"  @click="getPaiXu">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--返回按钮-->
    <backs></backs>

  </div>
</template>

<script>
  import backs from "@/components/menu/backPrev";
  export default {
    //零售终端排行
    name: "retailTerminalRankings",
    components: {
      backs
    },
    data(){
      return {
        color:'#0D90EB',
        sortResultsData:'1',
        headerTime:'今日',
        headerTimeprev:'今日',
        //时间弹层
        timePopup:false,
        timeRadio:"1",
        timeRadioPrev:"1",//记录上一次的选项
        timeSelect:[
          {name:"今日",type:"1"},
          {name:"本周",type:"2"},
          {name:"本月",type:"3"}
        ],
        //排序
        sortShows:false,
        sortResults:"1",
        sortResultsPrev:"0",//记录上一次的选项
        retailTerminalList:[],

        //数据
        retailTerminal:[],
        //客户信息
        keHulist:[],

        //分页
        page:1,
        pageSize:10,
        pageAll:0,
        noData:"none",
        //店仓
        stores:[],

        loading: false,
        finished: false,
        sys:{}
      }
    },
    methods:{
      timeCheckFn(type,name){
        this.timeRadio = type
        this.headerTime = name;
      },
      //点击时间的确定按钮
      getTsList(){
        this.timePopup=false;
        this.headerTimeprev =this.headerTime
        this.timeRadioPrev=this.timeRadio;
        this.retailTerminal=[];
        this.noData = "none";
        this.page=1;
        this.finished=false;
        this.loading=true;
        this.getData();
      },
      //点击排序的确定按钮
      getPaiXu(){
        this.sortShows=false;
        this.sortResultsPrev=this.sortResults;
        this.retailTerminal=[];
        this.noData = "none";
        this.page=1;
        this.finished=false;
        this.loading=true;
        this.getData();
      },
      getData(){
        console.log('请求前：'+this.sortResults)
        var $this=this;
        this.$http.order.get('/saleTable/terminalSaleSort',{
          params:{
            // type:3,
            type:$this.timeRadio,
            order:$this.sortResults
          }
        })
          .then(function (response) {
            // console.log(response.data.data);
            var empId = localStorage.getItem('empId');
            if(empId && response.data.code){
              $this.$toast.fail(response.data.message);
              $this.$router.go(-1)
              return;
            }
            $this.page=response.data.data.current_page+1;
            $this.pageAll=response.data.data.last_page;

            // var zList=[];
            for(var i=0;i<response.data.data.data.length;i++){
              // zList.push(response.data.data.data[i].tenant_id);
              $this.retailTerminal.push(response.data.data.data[i]);
            }
            $this.sortResultsData = $this.sortResults;
            $this.loading = false;
            console.log('请求后：'+$this.sortResults)
            if(!response.data.data.data.length){
              $this.loading = false;
              $this.finished = true;
              $this.retailTerminal="未找到相关数据";
            }else if ($this.retailTerminal.length >= response.data.data.total) {
              $this.finished = true;
              $this.noData = "block";
            }


            /*if(response.data.data.data.length>0){
              $this.getZhuHu(zList,response.data.data);
            }else{
              $this.loading = false;
              $this.finished = true;
              $this.retailTerminal="未找到相关数据"
            }*/
          })
          .catch(function (error) {
            $this.$toast.fail('登陆过期，请重新登陆');
            console.log(error);
          });



      },
      getZhuHu(arr,datas){
        var $this=this;
        this.$http.setting.get('/customer',{
          params:{
            related_tids:arr
          }
        })
          .then(function (response) {

            // console.log(datas);
            // console.log(response.data.data);
            $this.keHulist=response.data.data;


            for (let i = 0; i < datas.data.length; i++) {
              $this.retailTerminal.push(datas.data[i]);
            }
            $this.loading = false;

            if ($this.retailTerminal.length >= datas.total) {
              $this.finished = true;
            }

          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //获取店仓
      getStore(){
        var $this=this;
        this.$http.setting.get('store')
          .then(function (response) {
            $this.stores=response.data.data;
            // console.log(response.data.data);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      // 获取系统设置
      getXT(){
        this.$http.setting.get('/systemsetupval').then(res => {
          // console.log(res)
          if (!res.data.code) {
            let getsystem = (code) => Object.values(res.data.data).filter(item => item.code == code)[0].val;
            this.sys = {
              sys_setting_home_zdlsspphb  : getsystem('sys_setting_home_zdlsspphb'), //    是否显示：终端零售商品排行榜
              sys_setting_home_zdlsphb  : getsystem('sys_setting_home_zdlsphb'), //     是否显示：终端零售排行榜：
              sys_setting_home_dp  : getsystem('sys_setting_home_dpxsphb'), //     是否显示：店铺销售排行榜：
              sys_setting_home_sr  : getsystem('sys_setting_home_hysrtx'), //     是否显示：会员生日提醒：
              sys_setting_home_hyxztb  : getsystem('sys_setting_home_hyxztb'), //      是否显示：会员新增同比：
            }
            // return
            if(!parseInt(this.sys.sys_setting_home_zdlsphb)){
              this.$toast.fail('系统设置中未配置！');
              this.$router.go(-1)
              return
            }
          } else if (res.data.code==900001) {
            this.$toast.fail(res.data.message);
            this.$router.go(-1)
            return
          }


        })
      }
    },
    mounted(){
      // var empId = parseInt(localStorage.getItem('empId'));
      // if(!empId){
      //   this.getXT();
      // }
      this.getXT();
    }
  }
</script>

<style scoped>
  .retailTerminalRankings{
    font-size:14px;
    color:#666;
  }
  /*弹出层的边框线*/
  .retailTerminalRankings .van-cell{
    border-bottom:1px solid #e5e5e5;
  }
  .retailTerminalRankings .van-cell:first-child{
    border-top:1px solid #e5e5e5;
  }
  .retailTerminalRankings [class*=van-hairline]::after{
    border:0;
  }

  .retailTerminalRankings-top{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background: #fff;
    z-index: 999;
  }
  .retailTerminalRankings .van-popup{
    width:100%;
  }
  .retailTerminalRankings-content{
    margin-top:45px;
    padding:3px;
    /*background: skyblue;*/
  }
  .retailTerminalRankings .iconfont{
    font-size:12px;
  }

  .timeMask{
    width:320px!important;height:auto;background: #fff!important;border-radius: 5px;overflow: hidden
  }
  .maskBtn{
    width:100%;height:38px;line-height: 38px;
  }
  .paixuMask{
    width:320px!important;height:auto;background: #fff!important;border-radius: 5px;
  }
  .paimings{
    font-weight: bold;
    color:#39A1EF;
  }
  .paimings span{
    font-size:16px;
    line-height: 70px;
  }
  .pmimg{
    width:30px;
    height:30px;
  }
</style>
